<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
    <tr>
      <td colspan="4" style="padding-bottom: 5px;">
        <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                class="l-btn-text">重载</span></span></a>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
              @click="filter('all')"><span class="l-btn-text">全部</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='waiting'?'selected':''"
              @click="filter('waiting')"><span class="l-btn-text">待审核</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='processing'?'selected':''"
              @click="filter('processing')"><span class="l-btn-text">处理中</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='solved'?'selected':''"
              @click="filter('solved')"><span class="l-btn-text">已打款</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='refuse'?'selected':''"
              @click="filter('refuse')"><span class="l-btn-text">已拒绝</span></span>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 10px;"><span style="line-height:30px;">申请日期：</span>
        <input id="applyStartOn" v-model="params.apply_start" style="width:110px" type="text"
               class="easyui-datebox"> </input>至
        <input id="applyEndOn" v-model="params.apply_end" style="width:110px" type="text"
               class="easyui-datebox"> </input>
      </td>
      <td style="padding: 0 10px;">
        <select v-model="params.apply_type" @change="changeApplyType" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
          <option value="all">全部提现方式</option>
          <option value="bank">银行卡</option>
          <option value="wechat">微信零钱</option>
          <option value="alipay">支付宝</option>
        </select>
      </td>
      <td>
        <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
              class="l-btn-text">查询</span></span></a>
        <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                class="l-btn-text">重置</span></span></a>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="withdrawApplyTable"></table>
</div>
<div id="withdrawApplydlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var withdrawApplyVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        apply_start: '',
        apply_end: '',
        mode: 'all',
        apply_type:'all',
      },
      defParams: {
        apply_start: '',
        apply_end: '',
        mode: 'all',
        apply_type:'all',
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        $('#tb<?php echo $uniqid;?> #applyStartOn').datebox('setValue', this.params.apply_start);
        $('#tb<?php echo $uniqid;?> #applyEndOn').datebox('setValue', this.params.apply_end);
        this.init();
      },
      init: function () {
        this.params.apply_start = $('#tb<?php echo $uniqid;?> #applyStartOn').datebox('getValue');
        this.params.apply_end = $('#tb<?php echo $uniqid;?> #applyEndOn').datebox('getValue');
        withdrawApplyReload();
      },
      changeApplyType(){
        this.init();
      },
      filter(mode) {
        this.params.mode = mode;
        this.init();
      },
      reset:function (){
        this.params = JSON.parse(JSON.stringify(this.defParams));
        this.mounted();
      },
    }
  });
  
  var withdrawApplyReload = function () {
    if(withdrawApplyVm.initLoad){
      withdrawApplyVm.initLoad = false;
    }else{
      $("#withdrawApplyTable").datagrid('load', withdrawApplyVm.params);
    }
  };
  var withdrawApplySearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#withdrawApplyTable").datagrid({
      title: '提现申请管理',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'created_at',
      sortOrder: 'desc',
      idField: 'id',
      url: '/merchant/withdraw/index',
      queryParams: withdrawApplyVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'id',title:'ID', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'member',title:'申请用户', width: fixWidth(20), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '';
            if(value){
              if(value.avatar){
                content += '<div style="display: flex" class="touxiang_wenzi">';
                content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
              }else{
                content += '<div class="touxiang_wenzi">';
              }
              content += '用户ID：<span>'+rowData.member_id+'</span><br>';
              if(value.realname){
                content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
              }else{
                content += '昵称：<span>'+value.nickname+'</span><br>';
              }
              content += '手机号：<span>'+value.phone+'</span>';
              if(value.avatar){content += '</div>';}
              content += '</div>';
            }
            return content;
          }},
        {field:'money',title:'提现金额/应到账金额', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
              return  parseFloat(value) + '元 / '+ '<span style="color: #8103a7;">'+parseFloat(rowData.payable_money)+ '元</span>';
          }},
        {field:'actual_money',title:'实际到账', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            return  '<span style="color: #ee650c;">'+parseFloat(value)+ '元</span>';
          }},
        {field:'charge_money',title:'手续费（费率）', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            return  parseFloat(value)>0?(parseFloat(value)+ '元' + '(' + parseFloat(rowData.service_fee) + '%)'):'无';
          }},
        {field:'apply_type_name',title:'提现方式', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'apply_info_text',title:'打款信息', width: fixWidth(20), align: "left", halign: 'center'},
        {field:'created_at',title:'申请时间', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value.replace(/\s/g, "<br>"):'--';
          }},
        {field:'updated_at',title:'操作时间', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value.replace(/\s/g, "<br>"):'--';
          }},
        {field:'status_name',title:'状态', width: fixWidth(10), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            let status_con = '<div style="display: flex; flex-direction:column; width: 100%;"><div class="status_'+rowData.status+'" style="width: 100%; text-align: center;">'+value+'</div>';
            if(rowData.status == '-1'){
              status_con += '<div style="width:100%; text-align: left; white-space: pre-wrap;">拒绝原因：'+rowData.remark+'</div></div>';
            }
            return status_con
          }},
      ]],
    });
    withdrawApplyVm.initLoad = true;
  };
  onDatagridResize("#withdrawApplyTable");
  withdrawApplySearch();
</script>
<style>
  .status_0{
    color: #333333;
  }
  .status_1{
    color: #ee650c;
  }
  .status_2{
    color: #0eb913;
  }
  .status_-1{
    color: #9f1807;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
</style>
